<template>
<!-- 文章 列表 -->
  <div  class="scroll-wrapper">
    <van-pull-refresh v-model="isLoadingNume" @refresh="onRefresh">
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="(item , idx) in list" :key="idx" :title="item.title" >
  <div slot="label">
  <van-grid :column-num="item.cover.images.length">
    <van-grid-item v-for="(img,idx) in item.cover.images" :key='idx' >
    <van-image lazy-load :src="img"/>
  </van-grid-item>
  </van-grid>
      <div class="meta">
          <span>{{item.aut_name}}</span>
          <span>{{item.comm_count}}评论</span>
          <!-- 使用全局过滤器 -->
          <span>{{item.pubdate|relativeTime}}</span>
          <!-- 如果用户登录 ，则显示x按钮  如何知道当前用户登录。 去vuex中查看是有token
           @click=hClose 用来向父组件发布事件,传入当前文章
          -->
        <span class="close" @click="hClose(item)" v-if='$store.state.tokenInfo.token'>
          <van-icon   name='cross'></van-icon>
        </span>
      </div>
  </div>
  </van-cell>
</van-list>
</van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from "@/api/artice.js"
export default {
  name: 'articeList',
  // 父传子接收参数
  props: ['channels'],
  data () {
    return {
      list: [],
      timestamp: null, // 时间戳
      loading: false,
      finished: false,
      isLoadingNume: false
    };
  },
  created () {
    // 创建 组件完成之后 开始监听事件总线的 delArticle事件。
    this.$eventBus.$on('delArticle', obj => {
      console.log('我是频道', this.channels, '收到delArticle', obj);
      const { channelId, articeId } = obj
      // 是否是当前的频道articeId:
      // 是： 在list中找到文章编号是obj.article的数据，并删除
      // 否： 不处理
      if (channelId !== this.channels.id) {
        console.log('与我无关');
      }
      console.log('在list中，找出文章id为articeId的的元素,并删除', articeId);
      //  在数组list找到某个项，它的art_id 与 articleId 并删除它
      // 1、找出下标 findIndex
      // 2、删除它 splice(idx, 1)
      const idx = this.list.findIndex(article => article.art_id.toString() === articeId)
      // findIndex 找到元素的下标， 找不到就但会-1
      if (idx !== -1) {
        // 找到下标删除它
        // 如何在数组中，删除指定下标元素?
        this.list.splice(idx, 1)
      }
    })
  },
  methods: {
    async onRefresh () {
    // 在 van-pull-refresh组件中，下拉时，就会执行
    // 1、 去获取最新的文章
      const result = await getArticles(this.channels.id, Date.now())
      const arr = result.data.data.results
      // 2、 把文章追加到list 的头部
      this.list = arr.concat(this.list)
      // 3、提示最新结果
      this.$toast.success('刷新成功' + arr.length + '条')
      // 4、结果loadin 状态
      this.isLoadingNume = false
    },
    async onLoad () {
      // 异步更新数据
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      const result = await getArticles(this.channels.id, Date.now())
      console.log(result);
      // 保存本地请求回来的数据中的时间戳，以便下次传入
      this.timestamp = result.data.data.pre_tiemestamp
      // 1. 把数据追加到list中 （list的内容会越来越多）
      const arr = result.data.data.results
      // arr就是本次取回来的数据，就是一个数据组，其中每一个元素都是一个对象
      this.list = this.list.concat(arr)
      // 2. 把loading手动设置为false
      this.loading = false
      // 3 判断是否所有的数据已经加载完毕，如果是， 则finished 设为true
      if (arr.length === 0) {
        this.finished = true
      }
    },
    //  点击关闭按钮，通知父组件index.vue发出一个事件
    hClose (article) {
      console.log("要删除的当前文章是", article.art_id.toString());
      // 它向父组件index.vue 发出一个事件
      this.$emit('showMoreAction', article.art_id.toString())
    }
  }
}
</script>
<style scoped lang='less'>
//  x关闭按钮最最右侧显示
.meta {
  display: flex;
 span{
 margin-right: 10px;
}
 .close{
  // 移动到最右边
  margin-left:auto;
 }
}
</style>
